<template>
  <div class="course">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="card-title">课程列表</span>
          <el-button type="primary" @click="handleAdd()">添加课程</el-button>
        </div>
      </template>

      <!-- loading -->
      <el-skeleton :rows="5" animated v-if="isLoading"/>

      <!-- 课程列表 table -->
      <el-table v-if="!isLoading"
        :data="
          courseData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        :border="true"
      >
        <el-table-column label="ID" width="50">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程名称" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程描述" width="250">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.desc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程单价" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="default"
              @click="handleEdit(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-popconfirm
              title="你确认要删除该课程吗?"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :size="size"
          layout="total, prev, pager, next"
          :total="courseCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </el-card>

    <!-- 修改课程信息模态框 -->
    <el-dialog v-model="dialogEditVisible" title="修改课程信息" width="500">
      <!-- 表单 -->
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="课程名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="课程名描述">
          <el-input v-model="form.desc" />
        </el-form-item>
        <el-form-item label="课程单价">
          <el-input v-model="form.price" />
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="form.imgUrl" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogEditVisible = false">取消</el-button>
          <el-button type="primary" @click="editCourse()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加课程信息模态框 -->
    <el-dialog v-model="dialogAddVisible" title="添加课程信息" width="500">
      <!-- 表单 -->
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="课程名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="课程名描述">
          <el-input v-model="form.desc" />
        </el-form-item>
        <el-form-item label="课程单价">
          <el-input v-model="form.price" />
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="form.imgUrl" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogAddVisible = false">取消</el-button>
          <el-button type="primary" @click="addCourse()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const courseData = ref([]);
const dialogEditVisible = ref(false);
const dialogAddVisible = ref(false);
const form = ref({
  id: "",
  name: "",
  desc: "",
  price: "",
  imgUrl: "",
});
const courseCount = ref(0);
const pageSize = ref(5);
const currentPage = ref(1);
const isLoading = ref(true);

function getCourseData() {
  axios.get("http://localhost:3000/courses").then((res) => {
    courseData.value = res.data;
    courseCount.value = res.data.length;
    isLoading.value = false;
  });
}

function handleAdd() {
  form.value.id = "";
  form.value.name = "";
  form.value.desc = "";
  form.value.price = "";
  form.value.imgUrl = "";
  dialogAddVisible.value = true;
}

function addCourse() {
  axios
    .post("http://localhost:3000/courses", {
      name: form.value.name,
      desc: form.value.desc,
      price: form.value.price,
      imgurl: form.value.imgUrl,
    })
    .then((res) => {
      if (res.status === 201) {
        // 添加成功
        ElMessage.success("添加成功");
        dialogAddVisible.value = false;
        getCourseData();
      } else {
        // 添加失败
        ElMessage.error("添加失败，请检查网络连接！");
      }
    });
}

function editCourse() {
  console.log(form.value);
  axios
    .patch(`http://localhost:3000/courses/${form.value.id}`, {
      name: form.value.name,
      desc: form.value.desc,
      price: form.value.price,
      imgurl: form.value.imgUrl,
    })
    .then((res) => {
      if (res.status === 200) {
        // 修改成功
        ElMessage.success("修改成功");
        getCourseData();
      } else {
        // 修改失败
        ElMessage.error("修改失败，请检查网络连接！");
      }
    });

  dialogEditVisible.value = false;
}

function handleDelete(index, row) {
  axios.delete(`http://localhost:3000/courses/${row.id}`).then((result) => {
    console.log(result);
    if (result.status === 200) {
      // 删除成功
      ElMessage.success("删除成功");
      getCourseData();
    } else {
      // 删除失败
      ElMessage.error("删除失败，请检查网络连接！");
    }
  });
}
function handleEdit(index, row) {
  form.value.id = row.id;
  form.value.name = row.name;
  form.value.desc = row.desc;
  form.value.price = row.price;
  form.value.imgUrl = row.imgurl;
  dialogEditVisible.value = true;
}

onMounted(() => {
  getCourseData();
});
</script>

<style scoped>
.card-title {
  margin-right: 16px;
}
</style>